<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-19 21:25:22
 * @LastEditTime: 2024-06-19 23:56:27
 * @Description: TODO:输入功能描述
-->
<template>
  <div class="card-shell" :style="bgStyle">
    <div v-if="businessCard" class="business-card-img">
      <el-image :src="businessCard"></el-image>
    </div>
    <card-template-one v-else-if="String(templateId) === '1'" :userInfo="userInfo"></card-template-one>
    <card-template-two v-else-if="String(templateId) === '2'" :userInfo="userInfo"></card-template-two>
    <card-template-three v-else-if="String(templateId) === '3'" :userInfo="userInfo"></card-template-three>
    <card-template-four v-else-if="String(templateId) === '4'" :userInfo="userInfo"></card-template-four>
  </div>
</template>
<script>
import CardTemplateOne from './CardTemplateOne.vue'
import CardTemplateTwo from './CardTemplateTwo.vue'
import CardTemplateThree from './CardTemplateThree.vue'
import CardTemplateFour from './CardTemplateFour.vue'

export default {
  components: {
    CardTemplateOne,
    CardTemplateTwo,
    CardTemplateThree,
    CardTemplateFour,
  },
  props: {
    // 背景图
    cardBackImg: {
      type: String,
      default: ''
    },
    // 电子名片
    businessCard: {
      type: String,
      default: ''
    },
    // 用户信息
    userInfo: {
      type: Object,
      required: true
    },
    // 模版 Id
    templateId: {
      type: String | Number,
      default: '1'
    }
  },
  data() {
    return {
    }
  },
  computed: {
    bgStyle() {
      return this.cardBackImg && this.cardBackImg !== ''
        ? {
          backgroundImage: `url(${this.cardBackImg})`,
          backgroundSize: '100% 100%'
        }
        : {}
    }
  },
  created() {

  },
  methods: {
    jumpPage(url) {
      router.push(url)
    }
  }
}
</script>


<style scoped lang="scss">
.bg-top {
  background-image: url('/@/assets/images/home/default_bg.png');
  /* 替换为你的图片路径 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  background-size: 100% 100%;
}

.card-shell {
  padding: 12px 8px 6px;
  font-size: 16px;
  background-blend-mode: multiply;
  /* 设置为混合背景，就是背景图+背景色 */
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 100% 100%;
  position: relative;
}
</style>
